<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="./jquery-1.10.2.min.js"></script>
    <script src="./base.js"></script>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .ul-list{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-size: 14px; 
            border-top: 1px solid #E4E7ED;
        }
        .ul-list .ul-li {
            padding: 10px 15px;
            border-bottom: 1px solid #E4E7ED;
            cursor: pointer;
        }
        .ul-list .ul-li input[type='checkbox'] {
            /*隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 
            这种简单直接的方式，是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        .ul-list .ul-li input[type='checkbox']+label::before {
            content: '\a0';
            /*不换行空格*/
            display: inline-block;
            vertical-align: 0.2em;
            width: 1em;
            height:1em;
            margin-right: .2em;
            border-radius: .2em;
            background: #fff;
            /*复选框的背景色*/
            text-indent: 0.15em;
            line-height: 0.65;
            /* 放到皮肤中设置 
            border: 1px solid #DCE4FD;
            border-radius: 50%; */
        }

        /*皮肤样式*/

        .hwlist-default{
            border-top: 1px solid #E4E7ED;
        }
        .hwlist-default .ul-li {
            border-bottom: 1px solid #E4E7ED;
        }
        
        .hwlist-default .selected {
            color: #1989FA;
        }
        .hwlist-default .selected label{
            color: #1989FA;
        }
        .hwlist-default .ul-li input[type='checkbox']+label::before{
            border: 1px solid #DCE4FD;
            border-radius: 50%;
        }
        .hwlist-default .ul-li input[type='checkbox']:checked+label::before {
            content: '\2713';
            color:#fff;
            /*对号的 Unicode字符*/
            background: #52C41A;
            /*对号的颜色*/
        }
        /*选中时文本颜色*/
        .hwlist-default .ul-li input[type='checkbox']:checked+label{
            /* color:#1989FA; */
        }
    </style>
     <script>
            var listTComponent = HwBase.extend({
                context: {},//上下文
                tpl:  '<ul class="ul-list">'+
                            '<% for(var listid in obj.data){%>'+
                                '<% if(obj.mutiCheck){ %>'+ 
                                    '<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>">'+
                                        '<input type="checkbox" id="<%= obj.data[listid][obj.showFields.idfield] %>" <%= obj.autoFirstCheck==true && listid==0 ? \'checked\':\'\' %>>'+
                                        '<label for="<%= obj.data[listid][obj.showFields.idfield] %>"><%= obj.data[listid][obj.showFields.textfield] %></label>'+
                                    '</li>'+
                                '<%}else{ %>'+
                                    '<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>" id="<%= obj.data[listid][obj.showFields.idfield] %>">'+
                                        '<%= obj.data[listid][obj.showFields.textfield] %>'+
                                    '</li>'+
                                '<%}%>'+
                            '<%}%>'+
                        '</ul>',//模板
                container: {},//容器对象
                opts: {
                    env:'dev',//dev or vmd
                    container: '#container',//容器
                    width: '',//宽度
                    height: '',//高度
                    skin: 'default',//默认皮肤
                    autoSearch: false,//是否开启搜索
                    mutiCheck: true,//是否开启多选
                    autoFirstCheck: true,//是否默认选中第一行
                    showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
                    dataStore: [{dyid:"THAT13",dymc:"塔河AT13区块"},
                                {dyid:"THAT14",dymc:"塔河AT14区块"}, 
                                {dyid:"THAT15",dymc:"塔河AT15区块"}
                                ],//tab数据集
                   
                    temClick:function(item,self,e){}
                   
                },//默认配置项
                init: function (config) {
                    //自动保存配置项
                    this.__config = $.extend({}, this.opts, config);
                    this.render()
                    this.bind()
                },
                //可以使用get来获取配置项
                get: function (key) {
                    return this.__config[key]
                },
                //可以使用set来设置配置项
                set: function (key, value) {
                    this.__config[key] = value
                },
                bind: function () {
                    var self = this;
                    var parentNode = self.get('container') || $(document.body);
                   
                   //列表项选中事件
                    parentNode.find(".ul-list li").on('click',function(e){
                        var target = $(this);
                        //多选情况
                        if(self.get('mutiCheck')){
                            var checkbox = target.find('input');
                            if(checkbox.is(":checked")){
                                target.removeClass("selected");
                                checkbox.prop("checked",false);
                            }else{
                                target.addClass("selected");
                                checkbox.prop("checked",true);
                            }
                        }
                        //单选情况
                        else{
                            target.addClass('selected').siblings().removeClass('selected');
                        } 
                        if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
                            var index = $(".ul-list li").index(target);
                            //写了itemclick配置调用，绑定了组件事件也调用
                            self.get('itemClick')(self.get('__renderData')[index],self,e);
                            self.fire('itemClick',self.get('__renderData')[index],self,e);
                        }
                    })
                },
                render: function (dataConf) {
                    var self = this;
                    var data = {
                        autoSearch: self.get('autoSearch'),//是否开启搜索
                        mutiCheck: self.get("mutiCheck"),//是否开启多选
                        autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
                        autoSearch: self.get("autoSearch"),
                        showFields : self.get("showFields"),
                        data: dataConf || self.get('dataStore')
                    } 
                   
                    self.set("__renderData",data);
                    var html = self.parseTemplate(self.tpl,data);
                    var currentNode = $(html)
    
                    //设置宽度、高度、和皮肤
                    if(self.get('width')) currentNode.width(self.get('width'))
                    if(self.get('height')) currentNode.height(self.get('height'))
                    if(self.get('skin')) currentNode.addClass('hwlist-' + self.get('skin') || 'default')
    
                    self.set('__currentNode',currentNode)
    
                    if(self.get('env')=='dev'){
                        self.container = this.get('container') || $(document.body);
                        self.container.append(currentNode)
                    }else{
                        self.container = this.get('container');
                        self.container.update(html)
                    }
                },
                //定义销毁的方法，一些收尾工作都应该在这里
                destroy: function () {
                    var self = this
                    //去掉自身的事件监听
                    self.off()
                    //删除渲染好的dom节点
                    self.get('__currentNode').remove()
                },
                  //跟新数据
                setData:function(data){
                    var self = this;
                    
                    var newdata = {
                        autoSearch: self.get('autoSearch'),//是否开启搜索
                        mutiCheck: self.get("mutiCheck"),//是否开启多选
                        autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
                        autoSearch: self.get("autoSearch"),
                        showFields : self.get("showFields"),
                        data: data || self.get('dataStore')
                    } 
    
                    var html = self.parseTemplate(self.tpl,newdata);
                    var newHtmlNode = $(html)
    
                    //设置宽度、高度、和皮肤
                    if(self.get('width')) newHtmlNode.width(self.get('width'))
                    if(self.get('height')) newHtmlNode.height(self.get('height'))
                    if(self.get('skin')) newHtmlNode.addClass('hwlist-' + self.get('skin') || 'default')
    
                    var currentNode = self.get('__currentNode')
                     if (!currentNode) return;
    
                    currentNode.replaceWith(newHtmlNode)
                    self.set('__currentNode',currentNode)
                    self.set("__renderData",data);
    
                    self.bind();
                },
                //获取选中的对象
                getSelectItem:function(){
                    var self = this;
                    var currentNode = self.get('__currentNode');
                    return currentNode.find("li.selected");
                }
            })
           
       
            var tabTComponent = HwBase.extend({
                    context: {},//上下文
                    tpl: '<div class="hwtab">'+
                            '<ul class= "tab-title">'+
                                '<% for(var item in obj){%>'+
                                    '<li class="<%= obj[item].select && (obj[item].select==true) ? \'layui-this\' :\'\' %>"><%= obj[item].text %></li>'+
                                '<%}%>'+
                             '</ul>'+
                             '<div class="tab-content">'+
                                '<% for(var item in obj){%>'+
                                    '<div id="<%= obj[item].id %>" class="tab-item <%= obj[item].select && (obj[item].select==true) ? \'tab-show\' :\'\' %>">'+
                                    '</div>'+
                                '<%}%>'+
                             '</div>' +
                          '</div>',//模板
                    container: {},//容器对象
                    opts: {
                        env:'dev',//dev or vmd
                        container: '#container',//容器
                        width: '',//宽度
                        height: '',//高度
                        skin: 'default',//默认皮肤
                        dataStore:[{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],
                        tabChange:function(item,self,e){}
                       
                    },//默认配置项
                    init: function (config) {
                        //自动保存配置项
                        this.__config = $.extend({}, this.opts, config);
                        this.render()
                        this.bind()
                    },
                    //可以使用get来获取配置项
                    get: function (key) {
                        return this.__config[key]
                    },
                    //可以使用set来设置配置项
                    set: function (key, value) {
                        this.__config[key] = value
                    },
                    bind: function () {
                        var self = this;
                        var parentNode = self.get('container') || $(document.body);
                        //tab切换事件
                        parentNode.find(".tab-title li").on('click',function(e){
                            var index = $("ul.tab-title li").index($(this));
                            $(this).addClass('layui-this').siblings().removeClass('layui-this');
                            $(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
                            if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
                                self.get('tabChange')(self.get('__renderData')[index],self,e);
                                self.fire('tabChange',self.get('__renderData')[index],self,e);
                            }
                        })
                    },
                    render: function (data) {
                        var self = this;
                        data = data || self.get('dataStore');
                       
                        self.set("__renderData",data);
        
                        var html = self.parseTemplate(self.tpl,data);
                        var currentNode = $(html)
        
                        //设置宽度、高度、和皮肤
                        if(self.get('width')) currentNode.width(self.get('width'))
                        if(self.get('height')) currentNode.height(self.get('height'))
                        if(self.get('skin')) currentNode.addClass('hwtab-' + self.get('skin') || 'default')
        
                        self.set('__currentNode',currentNode)
        
                        if(self.get('env')=='dev'){
                            self.container = this.get('container') || $(document.body);
                            self.container.append(currentNode)
                        }else{
                            self.container = this.get('container');
                            self.container.update(html)
                        }
                    },
                    //定义销毁的方法，一些收尾工作都应该在这里
                    destroy: function () {
                        var self = this
                        //去掉自身的事件监听
                        self.off()
                        //删除渲染好的dom节点
                        self.get('__currentNode').remove()
                    },
                      //跟新数据
                    setData:function(data){
                        var self = this;
        
                        var html = self.parseTemplate(self.tpl,data);
                        var newHtmlNode = $(html)
        
                        //设置宽度、高度、和皮肤
                        if(self.get('width')) newHtmlNode.width(self.get('width'))
                        if(self.get('height')) newHtmlNode.height(self.get('height'))
                        if(self.get('skin')) newHtmlNode.addClass('hwtab-' + self.get('skin') || 'default')
        
                        var currentNode = self.get('__currentNode')
                         if (!currentNode) return;
        
                        currentNode.replaceWith(newHtmlNode)
                        self.set('__currentNode',currentNode)
                        self.set("__renderData",data);
        
                        self.bind();
                    },
                   //获取当前选中的tab对象
                    getSelectTab:function(){
                        var self = this;
                        var currentNode = self.get('__currentNode');
                        return currentNode.find("ul.tab-title li.layui-this");
                    },
                    getSelectTabContent:function(){
                        var self = this;
                        var currentNode = self.get('__currentNode');
                        return currentNode.find(".tab-content .tab-show");
                    },
                    getAllTabContent: function(){
                        var self = this;
                        var currentNode = self.get('__currentNode');
                        return currentNode.find('.tab-content .tab-item');
                    },
                    getAllTab:function(){
                        var self = this;
                        var currentNode = self.get('__currentNode');
                        return currentNode.find("ul.tab-title li");
                    }
                })
              
            </script>
    <script>
        
        var tablistTComponent = HwBase.extend({
            context: {},//上下文
            tpl: '',//模板
            container: {},//容器对象
            opts: {
                env:'dev',//dev or vmd
                container: '#container',//容器
                width: '',//宽度
                height: '',//高度
                skin:'default',
                dataStore:[{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],
                tabChange:function(item,self,e){},
                listConf:{
                    skin:'default',
                    autoSearch: false,//是否开启搜索
                    mutiCheck: true,//是否开启多选
                    autoFirstCheck: true,//是否默认选中第一行
                    showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
                    dataStore: [{dyid:"THAT13",dymc:"塔河AT13区块"},
                                {dyid:"THAT14",dymc:"塔河AT14区块"}, 
                                {dyid:"THAT15",dymc:"塔河AT15区块"}
                                ],//tab数据集
                
                    temClick:function(item,self,e){}
                }
            },//默认配置项
            init: function (config) {
                //自动保存配置项
                this.__config = $.extend({}, this.opts, config);
                this.render()
                this.bind()
            },
            //可以使用get来获取配置项
            get: function (key) {
                return this.__config[key]
            },
            //可以使用set来设置配置项
            set: function (key, value) {
                this.__config[key] = value
            },
            bind: function () {
                var self = this;
                var parentNode = self.get('container') || $(document.body);
                //tab切换事件
                parentNode.find(".tab-title li").on('click',function(e){
                    var index = $("ul.tab-title li").index($(this));
                    $(this).addClass('layui-this').siblings().removeClass('layui-this');
                    $(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
                    if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
                        self.get('tabChange')(self,e);
                    }
                })

                parentNode.find(".tab-item li").on('click',function(e){
                    var target = $(this);
                    //多选情况
                    if(self.get('mutiCheck')){
                        var checkbox = target.find('input');
                        if(checkbox.is(":checked")){
                            target.removeClass("selected");
                            checkbox.prop("checked",false);
                        }else{
                            target.addClass("selected");
                            checkbox.prop("checked",true);
                        }
                    }
                    //单选情况
                    else{
                        target.addClass('selected').siblings().removeClass('selected');
                    } 
                    if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
                        self.get('itemClick')(self,e);
                    }
                })
            },
             //用来实现刷新，只需要传入之前render时的数据里的key还有更新值，就可以自动刷新模板
            setTabdata : function(key,value){
              
            },
            render: function () {
                var self = this;
                var tab = new tabTComponent({
                    env:self.get('env'),//dev or vmd
                    container: self.get('container'),//容器
                    width: self.get('width'),//宽度
                    height: self.get('height'),//高度
                    skin: self.get('tabConf').skin,//默认皮肤
                    dataStore:self.get('tabConf').dataStore,
                    tabChange:self.get('tabConf').tabChange
                })
                var tabconts = tab.getAllTabContent();
                for(var index in tabconts){
                    var list = new listTComponent({

                    })
                } 
                var data = {
                    mutiCheck: self.get("mutiCheck"),//是否开启多选
                    autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
                    autoSearch: self.get("autoSearch"),
                    showFields : self.get("showFields"),
                    tabconf : tabconf || self.get("tabConf"),
                    listconf : listconf || self.get("dataStore")
                }
               
                self.set("__renderData",data);
                var html = self.parseTemplate(self.tpl,data);
                var currentNode = $(html)

                //设置宽度、高度、和皮肤
                if(self.get('width')) currentNode.width(self.get('width'))
                if(self.get('height')) currentNode.height(self.get('height'))
                if(self.get('skin')) currentNode.addClass('tablist-' + self.get('skin') || 'default')

                self.set('__currentNode',currentNode)

                if(self.get('env')=='dev'){
                    self.container = self.get('container') || $(document.body);
                    self.container.append(currentNode)
                }else{
                    self.container = self.get('container');
                    self.container.update(html)
                }
            },
            //定义销毁的方法，一些收尾工作都应该在这里
            destroy: function () {
                var self = this
                //去掉自身的事件监听
                self.off()
                //删除渲染好的dom节点
                self.get('__currentNode').remove()
            }
        })

        $(function(){
            var tablist = new tablistTComponent({
                container:$(".111")
            })
            tablist.setChuckdata('kfdy',[{dyid:"123",dymc:"123"},
                                  {dyid:"456",dymc:"456"}, 
                                  {dyid:"789",dymc:"789"}])
        })
    </script>
</head>
   
<body>
        <div style="width:400px;height:500px;" class='111'>
            
         </div>
</body>

</html>